<template>
    <div class="recognitionList-container">
        <div class="list-content">
            <div class="list-group" v-for="item in tableList" :key="item.id">
                <div class="goods-list">
                    <div class="goods-content">
                        <img mode="scaleToFill" class="goods-content-img" :src="baseUrl + item.id_front" />
                        <div class="goods-content-right">
                            <div class="goods-title">
                                <span>{{ item.id_number }}</span>
                            </div>
                            <div class="goods-volume">
                                <span>姓名:</span>
                                <span>{{ item.name }}</span>
                            </div>
                            <div class="goods-volume">
                                <span>性别:</span>
                                <span>{{ item.sex == 1 ? '男' : '女' }}</span>
                            </div>
                            <div class="goods-volume">
                                <span>类型:</span>
                                <span v-if="item.role_type == 1">参赛者</span>
                                <span v-if="item.role_type == 2">监护人</span>
                            </div>
                        </div>
                    </div>
                    <div class="goods-requirement">
                        <div class="goods-commission-edit" @click="handerClick(item, 1)">编辑</div>
                        <div class="goods-commission" @click="handerClick(item, 2)">删除</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 0.9rem;"></div>
        <div class="footer-group">
            <div class="button" @click="handerClick('', 3)">新增</div>
        </div>
    </div>
</template>

<script>
import {Toast} from 'vant';
export default {
    data: function () {
        return {
            mnueItemList: [],
            mnueItemIndex: 0,
            baseUrl: this.$API.ASSET_IMAGES_URL,
            active_id: '',
            tableList: [],
            rankList: [],
            userDetail: null,
            fristUser: null,
            secondUser: null,
            thirdUser: null,
            publicPath: process.env.NODE_ENV === 'development' ? '/' : '/weChatApp/',
            type: 1
        };
    },
    mounted() {
        this.initAjaxMethod();
    },
    methods: {
        initAjaxMethod() {
            this.$http
                .post(this.$API.RECOGNITION_LIST)
                .then((res) => {
                    if (res.code == 1) {
                        let list = Array.isArray(res.data) ? res.data : [];
                        this.tableList = list;
                    }
                });
        },
        handerClick(row, flag) {
            if (flag == 1) {
                this.$router.push({ path: '/recognitionAdd', query: { type: 2, id: row.id } });
            } else if (flag == 2) {
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定要进行此操作？',
                }).then(() => {
                    this.worksDelMethod(row.id)
                }).catch(() => { });
            } else if (flag == 3) {
                this.$router.push({ path: '/recognitionAdd', query: { type: 1 } });
            }
        },
        worksDelMethod(id) {
            Toast.loading({ message: "加载中...", forbidClick: true });
            this.$http
                .post(this.$API.RECOGNITION_DEL, { id: id })
                .then((res) => {
                    Toast.clear();
                    if (res.code == 1) {
                        this.$notify({ type: 'success', message: '操作成功' });
                        this.initAjaxMethod();
                    } else {
                        this.$notify({ type: 'warning', message: res.msg });
                    }
                });
        },
    },
};
</script>

<style lang="less">
.recognitionList-container {
    .header {
        padding: 0.24rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .goods-content-right {
        font-size: 0;
    }

    .header span {
        font-size: 0.3rem;
        font-weight: 400;
        color: #FE7612;
        margin-left: 0.2rem;
    }

    .header img {
        width: 0.24rem;
        height: 0.24rem;
    }

    .list-content {
        padding: 0.3rem;
    }

    .list-group {
        padding: 0.2rem;
        background-color: #fff;
        border-radius: 0.06rem;
        margin-bottom: 0.2rem;
    }

    .goods-list {
        position: relative;
    }

    .goods-list .goods-list-choice {
        position: absolute;
        left: 0;
        top: 40%;
        width: 0.36rem;
        height: 0.36rem;
    }

    .goods-content {
        padding-left: 1.9rem;
        position: relative;
    }

    .goods-content .goods-content-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 0.04rem;
        background-color: #eee;
    }

    .goods-title {
        span {
            font-size: 0.3rem;
            font-weight: 500;
            color: #000000;
        }
    }

    .goods-volume {
        padding-top: 0.1rem;
        display: flex;
        align-items: center;

        span:nth-child(1) {
            font-size: 0.32rem;
            font-weight: 600;
            color: #2D2D2D;
            white-space: nowrap;
        }

        span:nth-child(2) {
            font-size: 0.3rem;
            font-weight: 400;
            color: #4D5260;
            white-space: nowrap;
            margin-left: 0.1rem;
        }
    }

    .goods-commission {
        font-size: 0.3rem;
        font-weight: 400;
        color: #F52723;
        padding: 0.1rem 0.5rem;
        background-color: #FFEBE9;
        border: 1px solid #FEDBD7;
        border-radius: 0.5rem;
        margin-left: 0.2rem;
    }

    .goods-commission-edit {
        font-size: 0.3rem;
        font-weight: 400;
        color: #fff;
        padding: 0.1rem 0.5rem;
        background-color: #409EFF;
        border: 1px solid #409EFF;
        border-radius: 0.5rem;
    }

    .goods-requirement {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 0.2rem;
    }

    .footer-group {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 0.3rem;
        padding: 0.1rem;

        .button {
            height: 0.9rem;
            line-height: 0.9rem;
            text-align: center;
            font-size: 0.32rem;
            color: #fff;
            border-radius: 0.9rem;
            background: #409EFF;
        }

        .button1 {
            height: 0.9rem;
            line-height: 0.9rem;
            text-align: center;
            font-size: 0.32rem;
            color: #333;
            border-radius: 0.9rem;
            background: #eee;
        }
    }
}
</style>